<template>
	<view class="infomation">
		<block>
			<view class="bg_1"></view>
			<view class="flex_row_between_center home_top"   :style="{ top: 'calc(' + statusBarHeight + ' + 20rpx)' }">
				<view class="topic">资讯</view>
			</view>
			<view  class="info_nav flex_row_start_center" :style="{ 'padding-top': 'calc(' + statusBarHeight + ' + 80rpx)' }">
				<view v-for="(item, index) in navList"
						:key="index"
						class="nav-item"
						:class="{ current: tabCurrentIndex === index }"
						@click="tabClick(index)">{{item.text}}</view>
			</view>
			<swiper
			  :current="tabCurrentIndex"
			  class="swiper-box"
			  :style="{height:height}"
			  duration="300"
			  @change="changeTab"
			  :disable-touch="disTouch"
			>
			  <swiper-item
			    class="tab-content"
			    v-for="(tabItem, tabIndex) in navList"
			    :key="tabIndex"
			  >
			    <scroll-view
			      scroll-y
			    >
				  <view  :style="{height:height}">
					  <view v-if="tabCurrentIndex==0" >
							<view class="info_list"  v-for="(item,index) in tabItem.list " :key="index"  @click="natTo('/pages/information/recommend',item)">
								  <view class="info_list_title">{{item.recommendedTitle}}</view>
								  <view class="info_list_desc">{{item.recommendedImageType}}</view>
								  <image :src="item.recommendedImage" mode="aspectFill" class="info_image"></image>
							 </view>
						</view>
					  <view v-if="tabCurrentIndex==1">
						  <view class="noun" v-for="(item,index) in tabItem.list" :key="index" @click="natTo2('/pages/information/nounInterpretation',item)">
							  <view class="flex_row_start_center noun_title">
								  <view>{{item.explanTitle}}</view>
								  <view>{{item.explanTag}}</view>
							  </view>
							  <view class="noun_desc">{{item.explanDetail}}</view>
							<!-- <view class="flex_row_between_center noun_icon">
								 <view class="flex_row_start_center">
									 <view class="cuIcon-favor lg text-gray" style="margin-right: 10rpx;"></view>
									 <view class="cuIcon-favor lg text-gray"></view>
								 </view>
								 <view class="cuIcon-favor lg text-gray"></view>
							 </view> -->
						  </view>
						  
					  </view>
					  <view class="info_video" v-if="tabCurrentIndex==2">
							  <view class="menber">
								<image src="../../static/images/other/9fdhgotv.png" mode="aspectFill" class="menberImage"></image>
							  </view>
							  <view class="flex_row_start_center" v-for="(item,index) in 4" :key="index">
								  <image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yj/rumeng.jpg" mode="aspectFit" class="info_video_image"></image>
								  <view>
									  <view class="info_video_title">易经基础</view>
									  <view class="flex_row_start_center info_video_label">
										  <view>24章节</view>
										  <view>免费</view>
									  </view>
									  <view class="info_video_desc">对易经知识基础性的讲解，让初学者也能快速学会易经。</view>
								  </view>
							  </view>
					  </view>
				  </view>
			    </scroll-view>
				<loadingState
				    v-if="
				      tabItem.loadingState == 'first_loading' ||
				      tabItem.list.length > 0
				    "
				    :state="tabItem.loadingState"
				  />
				</scroll-view>
			  </swiper-item>
			</swiper>
		</block>
	</view>
</template>


<script>
	export default {
		data(){
			return{
				statusBarHeight:getApp().globalData.statusBarHeight+'px',
				tabCurrentIndex:0,
				navList: [{
						state: 0,
						text: '推荐',
						loadingState: 'first_loading',
						list: [],
						current: 1, //分页
					},
					// {
					// 	state: 1,
					// 	text: '名词解释',
					// 	loadingState: 'first_loading',
					// 	list: [],
					// 	current: 1, //分页
					// },
					// {
					// 	state: 2,
					// 	text: '视频',
					// 	loadingState: 'first_loading',
					// 	list: [],
					// 	current: 1, //分页
					// },
					// {
					// 	state: 3,
					// 	text: '书籍',
					// 	loadingState: 'first_loading',
					// 	list: [],
					// 	current: 1, //分页
					// },
				],
				// #ifdef H5
				disTouch:true,
				// #endif
				// #ifndef H5
				disTouch:false,
				// #endif
				height:null,
			}
		},
		onLoad(){
			const query = uni.createSelectorQuery().in(this);
			query
			  .select(".swiper-box")
			  .boundingClientRect((data) => {
			    // console.log("得到布局位置信息" + JSON.stringify(data));
			    // console.log("节点离页面顶部的距离为" + parseInt(data.top));
				this.height=getApp().globalData.windowHeight-parseInt(data.top)-10+'px'
			  })
			  .exec();
			  // this.loadData()
		},
		onPullDownRefresh(){
			console.log('下拉刷新');
			// let index = this.tabCurrentIndex;
			// let navItem = this.navList.filter(item => item.state == index)[0];
			// navItem.list=[]
			// navItem.loadingState="first_loading"
			// this.loadData('tabChange');
			// if(navItem.list.length>0){
			// 	uni.stopPullDownRefresh()
			// }
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		
		methods:{
			natTo(url,item){
				// 要传递的对象参数
				const obj = {
					recommendedId:item.recommendedId
				}
				
				// 将对象参数转为JSON字符串，并使用encodeURIComponent编码
				const params = encodeURIComponent(JSON.stringify(obj));
				
				// 跳转页面并传递对象参数
				uni.navigateTo({
				   url: `${url}?params=${params}`
				});
			},
			natTo2(url,item){
				// 要传递的对象参数
				const obj = {
					explanId:item.explanId
				}
				
				// 将对象参数转为JSON字符串，并使用encodeURIComponent编码
				const params = encodeURIComponent(JSON.stringify(obj));
				
				// 跳转页面并传递对象参数
				uni.navigateTo({
				   url: `${url}?params=${params}`
				});
			},
			
			tabClick(index){
				this.tabCurrentIndex=index
				
				// #ifdef MP-ALIPAY
				this.loadData('tabChange');
				// #endif
				// if(this.tabCurrentIndex==0){
				// 	this.loadData('tabChange')
				// }else if(this.tabCurrentIndex==1){
				// 	this.loadData2('tabChange')
				// }
			},
			changeTab(e){
				console.log('2');
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
				// if(this.tabCurrentIndex==0){
				// 	this.loadData('tabChange')
				// }else if(this.tabCurrentIndex==1){
				// 	this.loadData2('tabChange')
				// }
			},
			//获取推荐
			loadData(source) {
				//将订单挂载到tab列表下,起到缓存的效果，避免多次请求
				let index = this.tabCurrentIndex;
				let navItem = this.navList.filter(item => item.state == index)[0];
				let state = navItem.state;
			
				if (source === 'tabChange' && navItem.loadingState !== 'first_loading') {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingState === 'loading') {
					//防止重复加载
					return;
				}
			
				if (navItem.loadingState == 'no_more_data') {
					//已经没有数据，无需再请求
					return;
				}
			
				let param = {};
				if(index==0){
					param.url = 'v3/consult/front/recommended/list';
				}else if(index==1){
					param.url = 'v3/consult/front/nounExplan/list';
				}
				
				param.data = {};
				param.data.pageSize = 10;
				param.data.current = navItem.current;
				navItem.loadingState = navItem.loadingState == 'first_loading' ? navItem.loadingState : 'loading';
				// param.data.state = navItem.state;
			
				this.$request(param).then(res => {
					if (res.state == 200) {
						navItem.list = navItem.list.concat(res.data.list);
						let hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (hasMore) {
							navItem.current++;
							navItem.loadingState = 'allow_loading_more';
						} else {
							navItem.loadingState = 'no_more_data';
						}
					} else {
						this.$modal.msg(res.msg);
					}
					if (this.stopPullDownRefresh) {
						this.stopPullDownRefresh = false;
						uni.stopPullDownRefresh();
					}
				}).catch((e) => {
					//异常处理
				})
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f8f8f8;
		width: 750rpx;
		margin: 0 auto;
		position: relative;
		height: 100%;
	}
	
	.infomation{
		margin-bottom: 20rpx;
	
	}
	.bg_1 {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 120rpx;
		z-index: 0;
		right: 0;
		margin: 0 auto;
		background: #fff;
	}
	.home_top{
		
		position: fixed;
		left: 0;
		padding: 10rpx 35rpx;
		z-index: 99;
		width: 750rpx;
		height: 62rpx;
		background-color: #fff;
		
		.topic{
			font-size: 36rpx;
			color: #9B4C3A;
			font-family: SimSun;
			margin-right: 38rpx;
		}
		
	}
	.info_nav{
		padding: 20rpx 36rpx;
		color: #8C8C8C;
		font-size: 32rpx;
		background-color: #fff;
		.nav-item{
			margin-right: 48rpx;
			
			&:last-child{
				margin-right: 0;
			}
			&.current {
			  color: #A76252;
			  font-size: 32rpx;
			  position: relative;
			  
			  &::after{
				content: '';
				position: absolute;
				left:50%;
				transform: translateX(-50%);
				bottom: -18rpx;
				height: 6rpx;
				width: 20px;
				background-color:#A76252;
			  }
			}
			
		}
	}
	
	.info_list{
		padding: 20rpx 30rpx;
		background-color: #fff;
		.info_list_title{
			color: #000000;
			font-size: 28rpx;
			margin-bottom: 8rpx;
		}
		
		.info_list_desc{
			color: #BFBFBF;
			font-size: 28rpx;
			margin-bottom: 18rpx;
		}
		.info_image{
			width: 686rpx;
			height: 186rpx;
		}
		
	}
	
	.noun{
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #cacaca;
		.noun_title{
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 24rpx;
			& view:last-child{
				font-size: 20rpx;
				color: #A76252;
				 border-radius: 8rpx;
				 background: #a7625233;
				 padding: 4rpx 10rpx 4rpx 16rpx;
				 margin-left: 20rpx;
			}
		}
		.noun_desc{
			font-size: 28rpx;
			color: rgb(51, 51, 51);
			//超出两行省略号
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			line-clamp: 4;
			-webkit-line-clamp: 4; //显示几行

		}
		.noun_icon{
			margin-top: 24rpx;
		}
	}

    .info_video{
		padding: 20rpx 30rpx;
		background-color: #fff;
		
		.info_video_image{
			width: 308rpx;
			height: 186rpx;
			margin-right: 40rpx;
		}
		.info_video_title{
			color: #000000;
			font-size: 28rpx;
			margin-bottom: 8rpx;
		}
		.info_video_label{
			font-size: 28rpx;
			color: #8C8C8C;
			& view{
				background-color: #F3F4F9;
				padding: 10rpx;
			}
			& view:first-child{
				margin-right: 10rpx;
			}
		}
		.info_video_desc{
			margin-top: 26rpx;
			color: #BFBFBF;
			font-size: 28rpx;
		}
	}
	
	.menber{
		padding:14rpx 30rpx;
	}
	.menberImage{
		  width: 684rpx;
		  height: 208rpx;
		  border-radius: 16rpx;
	}
</style>